<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我的作品</title>
    <script src="js/jquery.min.js"></script>
    <script src="js/common.js"></script>
    <link rel="stylesheet" href="css/common.css">
<!--    <link rel="stylesheet" href="css/my-work.css">-->
</head>
<body>
<div class="nav">
    <img src="img/head1.jpg" alt="">
    <span>My Space</span>
    <!-- 空白元素 实现占位 -->
    <div class="spacer"></div>
    <a href="index.html">主页</a>
    <a href="mywork.html">我的作品</a>
    <a href="blog_list.html">博客</a>
        <a href="#">生活碎片</a>
    <a href="logout">退出</a>
</div>
<div class="container">
    <!-- 左侧个人信息 -->
    <div class="left">
        <!-- 表示整个用户的信息区域 -->
        <div class="card">
            <img src="img/head.jpg" alt="">
            <!--            用户名-->
            <h3></h3>
            <a href="https://github.com/lt152" target="_blank">github地址</a>
            <div class="counter">
                <span>文章</span>
                <span>分类</span>
            </div>
            <div class="counter">
                <span>4</span>
                <span>1</span>
            </div>
            <div style="margin-top: 20px">
                <p style="font-size: small">透过黑暗，看到光明。</p>
            </div>
        </div>
    </div>
    <!-- 右侧内容详情 -->
    <div class="middle" style="width: 980px">
        <!--<span >454545</span>-->
        <div class="img-grid">
            <img src="img/l1.jpg" title="图片1">
            <img src="img/l2.jpg" title="图片2">
            <img src="img/l3.jpg" title="图片3">
            <img src="img/l4.jpg" title="图片4">
            <img src="img/l5.jpg" title="图片5">
            <img src="img/l6.jpg" title="图片6">
        </div>

    </div>

</div>
</body>
</html>
<script>
    var pathname = location.pathname;
    var currentFileName = pathname.substring(pathname.lastIndexOf("/") + 1);
    getUserInfo(currentFileName);
</script>
<style>
    .img-grid {
        display: flex;
        flex-wrap: wrap;
        margin-top: 60px;
        margin-left: 50px;
        margin-bottom: 60px;
    }
    .img-grid img {
        width: 400px;
        height: 275px;
        margin: 15px;
    }
   .img-grid img:hover::after {
        content: attr(title);
        position: absolute;
        top: 0;
        left: 0;
        background-color: rgba(0, 0, 0, 0.6);
        color: #fff;
        padding: 10px;
    }

</style>